<template>
  <el-dialog :model-value="dialogVisible" :z-index="1000" width="80%" title="请选择人员" :before-close="handleClose" draggable>
    <div class="content-box">
      <div class="content">
        <div class="group">
          <div class="tree">
            <ZTree :id="treeId" :api="getOrgTree" @click-dom="zTreeOnClick" />
          </div>
        </div>
        <div class="main">
          <div class="table-box" v-loading="loading">
            <el-form ref="formRef" label-suffix=":" :model="form" :rules="rules">
              <el-form-item label="有效期" prop="datetimerange" style="max-width: 400px">
                <el-date-picker
                  v-model="form.datetimerange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="_dateChange"
                />
              </el-form-item>
            </el-form>
            <ProTable
              ref="proTable"
              title="人员列表"
              rowKey="empid"
              :columns="columns"
              :request-api="getTableList"
              :data-callback="dataCallback"
              :tool-button="false"
              :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
              :small="true"
            >
              <!-- Expand -->
              <template #expand="scope">
                {{ scope.row }}
              </template>
            </ProTable>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="EmployeeDialog">
/* eslint-disable */
// @ts-nocheck
import { reactive, ref, watch, h, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import { getOrgTree } from "@/api/modules/common";
import EmployeeDrawer from "./components/EmployeeDrawer.vue";
import { msgMap } from "@/config/index";
import dayjs from "dayjs";
import { getEmployeeList } from "@/api/modules/cardIssuingCenter/employeeManage";
import { ElMessage, FormInstance } from "element-plus";

const formRef = ref<FormInstance>();

const form: any = ref({
  datetimerange: ""
});

const rules = reactive({
  datetimerange: [{ required: true, message: "请选择有效期" }]
});

const treeId = ref("tree1");
const loading = ref(false);
const orgUnitIDs = ref([]);
const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records || [],
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getEmployeeList({ ...newParams, orgUnitIDs: orgUnitIDs.value });
};

const columns: any = [
  { type: "selection", fixed: "left", width: 60 },
  {
    prop: "clause",
    label: "姓名",
    isShow: false,
    search: { el: "input" },
    width: 120
  },
  {
    prop: "empcode",
    label: "编码"
  },
  {
    prop: "empname",
    label: "姓名"
  },
  {
    prop: "cardType",
    label: "部门"
  }
];

const props = defineProps<{
  dialogVisible: boolean;
  handleClose: () => void;
  submitCallback: (name: any, id: any) => void;
}>();

/**
 * 有效期时间切换
 */
const _dateChange = evt => {
  console.log(evt);
};

/**
 * 提交信息
 */
const handleSubmit = async () => {
  formRef.value!.validate(async valid => {
    if (!valid) return;
    const selectedListIds = proTable.value.element.getSelectionRows().map(item => item.empid);
    if (!selectedListIds.length) {
      ElMessage.error("请选择要增加的人员");
      return false;
    }

    let { datetimerange } = form.value;
    datetimerange = datetimerange.map(item => dayjs(new Date(item)).format("YYYY-MM-DD HH:mm:ss"));
    props.submitCallback(selectedListIds, datetimerange);
  });
};

/**
 * 点击树节点
 */
function zTreeOnClick({ ids }) {
  orgUnitIDs.value = ids;
  proTable.value && proTable.value.getTableList();
}

watch(
  () => props.dialogVisible,
  nV => {
    if (nV) {
      form.value = {
        datetimerange: ""
      };
      proTable.value && proTable.value.clearSelection();
    }
  }
);
</script>
<style lang="scss" scoped>
@import "@/styles/custom.scss";
.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80vh;
}
.group {
  width: 400px;
  height: 100%;
  padding: 0 15px;
  margin-right: 10px;
  background: #ffffff;
  border-radius: 5px;
  .tree {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    overflow-y: auto;
  }
}
.main {
  display: flex;
  flex: 1;
  flex-flow: column;
  width: 0;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
  .table-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
